import React from 'react';
import { TabBar } from 'antd-mobile';
import {
    AppOutline,
    MessageOutline,
    UserOutline,
    CalendarOutline,
} from 'antd-mobile-icons';
import { history, useLocation, Outlet } from 'umi';
import styles from './BasicLayout.less';
import ErrorBoundary from '@/components/ErrorBoundary';

const BasicLayout: React.FC = () => {
    const location = useLocation();
    const { pathname } = location;

    const tabs = [
        {
            key: '/home',
            title: '首页',
            icon: <AppOutline />,
        },
        {
            key: '/course',
            title: '课程',
            icon: <CalendarOutline />,
        },
        {
            key: '/message',
            title: '消息',
            icon: <MessageOutline />,
        },
        {
            key: '/user',
            title: '我的',
            icon: <UserOutline />,
        },
    ];

    const setRouteActive = (value: string) => {
        history.push(value);
    };

    return (
        <ErrorBoundary>
            <div className={styles.basicLayout}>
                <div className={styles.contentWrapper}>
                    <Outlet />
                </div>
                <TabBar className={styles.tabBar} activeKey={pathname} onChange={value => setRouteActive(value)}>
                    {tabs.map(item => (
                        <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                    ))}
                </TabBar>
            </div>
        </ErrorBoundary>
    );
};

export default BasicLayout; 